<template>
  <!-- 访客记录-详情 -->
  <public-modal
    :footer="false"
    :publicVisible="publicVisible"
    cancelContext="拒绝"
    confirmContext="通过"
    modalStyle="detailModal"
    title="反诈APP推广记录"
    width="980px"
    @cancel="cancel"
    @handleOk="handleOk"
  >
    <div slot="content">
      <div class="common-title">
        <div class="icon"></div>
        <div class="content">民警信息推广</div>
      </div>

      <table style="margin: 12px 0">
        <tr>
          <td class="td-label">派出所</td>
          <td class="td-value text-overflow" colspan="3">
            {{ record.policeAgencyId_dictText }}
          </td>
        </tr>

        <tr>
          <td class="td-label">推广民警</td>
          <td class="td-value text-overflow">
            {{ record.policeName }}
          </td>

          <td class="td-label">推广时间</td>
          <td class="td-value text-overflow">
            {{ record.createTime }}
          </td>
        </tr>
      </table>

      <div class="common-title">
        <div class="icon"></div>
        <div class="content">群众信息</div>
      </div>

      <table style="margin: 12px 0">
        <tr>
          <td class="td-label">群众姓名</td>
          <td class="td-value text-overflow">
            {{ record.userName }}
          </td>

          <td class="td-label">反诈APP截图</td>
          <td class="td-value text-overflow">
            <span class="click-style" @click="werImg(record.userImage)">查看</span>
            <img
              :id="record.userImage"
              :data-original="imgPrefix + record.userImage"
              :src="imgPrefix + record.userImage"
              style="display: none"
            />
          </td>
        </tr>

        <tr>
          <td class="td-label">联系方式</td>
          <td class="td-value text-overflow">
            {{ record.mobile }}
          </td>

          <td class="td-label">身份证号</td>
          <td class="td-value text-overflow">
            {{ record.idCard }}
          </td>
        </tr>
      </table>
    </div>

    <div slot="footer"></div>
  </public-modal>
</template>
<script>
import publicModal from '@/components/publicModal'
import { ajaxGetDictItems } from '@/api/api'
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import { getPrefixImg } from '../../../utils/util'
export default {
  name: 'detailModal',
  components: { publicModal },
  data() {
    return {
      publicVisible: false,
      record: {},
      imgPrefix: '',
    }
  },
  methods: {
    show(records) {
      this.publicVisible = true
      this.record = records
      this.get_dict()
    },

    async get_dict() {
      let { result: static_server } = await ajaxGetDictItems({ code: 'static_server' })
      this.imgPrefix = getPrefixImg()
    },

    werImg(id) {
      const ViewerDom = document.getElementById(id)
      const viewer = new Viewer(ViewerDom, {
        toolbar: false,
        button: false,
        navbar: false,
        title: false,
        zIndex: '9999',
        url: 'data-original',
        hide: function () {
          viewer.destroy()
        },
      })
      viewer.show()
    },

    handleOk() {
      this.publicVisible = false
    },
    cancel() {
      this.publicVisible = false
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .modalCotent {
  padding: 20px 20px;
  border-radius: 0 0 4px 4px;
}

/deep/ .modalFooter {
  height: 0 !important;
}

/deep/ .ant-checkbox-disabled + span {
  color: #1163b8;
}

/deep/ .ant-checkbox-inner::after {
  border-color: #7db2e8 !important;
}

table {
  border-collapse: collapse;
}
tr {
  height: 46px;
  font-size: 14px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
}
.td-label {
  background: var(--theme-modal-label-bg);
  border: 0.01rem solid var(--theme-input-border);
  color: var(--theme-tab-text-color);
  width: 160px;
  min-width: 160px;
  text-align: center;
}

.td-value {
  background: var(--theme-container-bg);
  border: 0.01rem solid var(--theme-input-border);
  color: var(--theme-modal-label-value-color);
  padding-left: 25px;
  width: 400px;
}

.click-style {
  color: #47e829;
  cursor: pointer;
}

.p-14 {
  padding: 14px 20px;
}

.click-img {
  width: 150px;
  height: 170px;
  object-fit: cover;
  cursor: pointer;
  margin-left: 10px;
}
</style>
